<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>题目详情</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">


		window.onload = myfun;
		function myfun()
		{
			progress();
		}

		function progress(){
			//------------进度条----------------
			var pro=0;//设置进度条的初始值
			var proBar = setInterval(function(){
				pro++;
				document.getElementById("progress").style.width=pro+"%";
				document.getElementById("ww").innerText= pro+"%";
				if(pro == 100){
					clearInterval(proBar);
					document.getElementById("now").style.display="none";
					document.getElementById("now-time-id").style.display="";
					document.getElementById("extended").style.display="";
					tiem(3600);
				}
			},20);
		}


  var timer1;
		function tiem(time){
			var intDiff = parseInt(time);//倒计时总秒数量
			function timer(intDiff) {
				timer1 =  window.setInterval( function () {
					var day = 0,
							hour = 0,
							minute = 0,
							second = 0;//时间默认值
					if (intDiff > 0) {
						day = Math.floor(intDiff / (60 * 60 * 24));
						hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
						minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
						second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
					}
					if (minute <= 9) minute = '0' + minute;
					if (second <= 9) second = '0' + second;
					$('#day_show').html(day + "天");
					$('#hour_show').html('<s id="h"></s>' + hour + ':');
					$('#minute_show').html('<s></s>' + minute + ':');
					$('#second_show').html('<s></s>' + second);
					document.getElementById("timetest").value=intDiff;
					intDiff--;
				}, 1000);
			}
			$(function () {
				timer(intDiff);
			});
		}


     function overtime(){

		 document.getElementById("overtime").style.display="";
		 document.getElementById("prolong").value="0";

    }







		$(document).ready(function() {
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});

		var countdown=10;
		function setTime(val) {
			if (countdown == 0) {
				val.removeAttribute("disabled");
				val.value="免费获取验证码";
				countdown = 10;
			} else {
				val.setAttribute("disabled", true);
				val.value="重新发送(" + countdown + ")";
				countdown--;
			}
			setTimeout(function() {
				setTime(val)
			},1000)
		}




		function btn(){
			window.clearInterval(timer1);
			document.getElementById("overtime").style.display="none";
			var prolong = document.getElementById("prolong").value;
			var timetest = document.getElementById("timetest").value;
			var time = (parseInt(prolong)*60) + parseInt(timetest);
			tiem(time);  //从新调用定时器

		}
	</script>



	<style type="text/css">

		.now{
			height: 25px;
			width: 300px;
			/*background-color: #000088;*/
		}


		#bar{
			float: left;
			width:250px;
			height:15px;
			background-color:#ccc;
			overflow:hidden;
		}
		#progress{
			float: left;
			width:0;
			height:30px;
			background-color:#b991ef;
		}

		.now-time-id{
			width: 400px;
			height: 80px;
			/*border:1px solid cadetblue ;*/
		}
		.now-id{
			position: relative;
			top: 10px;
			width: 100%;
			height: 40%;
			text-align: center;
		}
		.now-id label{
			font-size: 16px;
           color: orange;


		}
		.now-time{
			position: relative;
			bottom: -10px;
			width: 100%;
			height: 60%;
			text-align: center;
		}
		.now-time label{
			font-size: 20px;
			color: red;
		}
        .extended{
			position: relative;
			left: 130px;
			width: 150px;
			line-height: 30px;
			text-align: center;
			background-color: orange;

		}
		#overtime{
			border:1px solid cadetblue ;
			width: 200px;
			position: absolute;
			top: 20%;
			left: 30%;
			background-color: honeydew;
		}
		</style>


</head>
<body>

	<ul class="nav nav-tabs">
		<%--<li><a href="${ctx}/resource/resourceCtfSet/stuCtfSetList/">CTF题目集列表</a></li>--%>
		<li class="active"><a>题目详情</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="resourceCtfSubject" action="#" method="post" class="form-horizontal">
		<%--<form:hidden path="id"/>--%>
		<%--<sys:message content="${message}"/>--%>
		<input type="hidden" id="timetest">
		<div class="control-group">
			<label class="control-label">分值：</label>
			<div class="controls">
				<label class="lbl">  123</label>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">类型：</label>
			<div class="controls">
				<label class="lbl">123</label>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">题目：</label>
			<div class="controls">
				<label class="lbl">123</label>
			</div>
		</div>


		<div class="control-group">
			<div class="controls">
				<a href="#">点击下载附件</a>
			</div>
		</div>



		<div class="control-group">
			<div class="controls">

				<div class="now" id="now">
					<div id="bar"><div id="progress"></div></div>  <label id="ww">0</label>
				</div>



				<div  class="now-time-id" id="now-time-id" style="display:none">

					<div class="now-id"><label>113213123414adasdassssssssssssssd</label></div>
					<div class="now-time"><label><input id="time" type="hidden" value="${time}"><strong id="hour_show">00:</strong><strong id="minute_show">00:</strong><strong id="second_show">00</strong></label></div>


				</div>


				<div class="extended" id="extended"  style="display:none" onclick="overtime()">延长比赛时间</div>


			</div>
		</div>





		<%--延长比赛时间--%>
		<div id="overtime" style="display:none">
			<div id="importForm" class="form-search" style="padding-left:20px;text-align:center;"><br/>
				<input name="timeId" id="timeId"  style="width: 30px" type="hidden"/><br/>
				延长	<input id="prolong" name="time" style="width: 30px"  type="text"/>分钟<br/><br/>
				<div id="btnImportSubmit" onclick="btn()" class="btn btn-primary">确定</div><br/>
				<input    style="width: 30px" type="hidden"/><br/>
			</div>
		</div>








		<div class="control-group">
			<label class="control-label">Flag：</label>
			<div class="controls">
				<input  htmlEscape="false" maxlength="100" class="input-xlarge required"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">解题思路：</label>
			<div class="controls">

			</div>
		</div>
		<div class="form-actions">
			<shiro:hasPermission name="teach:teachStudent:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="提 交"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>